<!--
 * @Author: LiYuan
 * @Date: 2021-04-01 10:48:31
 * @LastEditTime: 2021-04-08 14:15:17
 * @LastEditors: LiYuan
 * @Description: 客户评价
 * You build it, You run it.
-->
<template>
  <div class="customer-evaluate">
    <template v-if="!customerSatisfaction">
      <div class="form-view-row">
        <label>{{$t('task.detail.components.serviceDegree')}}</label>
        <div class="form-view-row-content">
          <!-- <span :class="['evaluate-degree-img', getDegreeImg(reviewData.degree)]"></span> -->
          <i class="iconfont" :class="getDegreeImg(reviewData.degree)"></i>
          <span class="evaluate-degree-text">{{reviewData.degree}}</span>
        </div>
      </div>
      <div class="form-view-row" v-if="evaluateConfig.useStarEvaluate && starFields.length">
        <label>{{$t('task.detail.components.serviceEvaluate')}}</label>
        <div class="star-evaluate-row-content">
          <div class="star-evaluate-row" v-for="(star, index) in starFields" :key="index">
            <span class="star-title">{{ star.name }}</span>
            <base-service-star :value="getStar(star.fieldName)"></base-service-star>
          </div>
        </div>
      </div>
      <div class="form-view-row" v-if="evaluateConfig.useTagEvaluate && tagEvaluates.length">
        <label>{{$t('common.customer.questionnaire.serviceTag')}}</label>
        <div class="form-view-row-content evaluate-tag">
          <div class="review-tag" v-for="tag in tagEvaluates" :key="tag">
            {{tag}}
          </div>
        </div>
      </div>
      <div class="form-view-row">
        <label>{{$t('event.setting.constant.flow_map.name5')}}</label>
        <div class="form-view-row-content">
          <strong style="white-space: pre-line;" v-html="reviewData.suggestion || ''"></strong>
          <p class="review-other-info">
            <span v-if="reviewData.evaluateTime">{{$t('task.detail.components.evaluateTime')}}：{{reviewData.evaluateTime | fmt_datetime}}</span>
          </p>
        </div>
      </div>
    </template>

    <template v-else>
      <div class="detail-evaluated" v-loading="loading">
        <iframe id="iframepage" :src="iframeUrl" height="350px" width="100%" />
      </div>
      <div class="evaluate-time mb_12" v-if="reviewData.evaluateTime">
        {{$t('task.detail.components.evaluateTime')}}：{{ reviewData.evaluateTime | fmt_datetime }}
      </div>
    </template>

    <div class="form-group" >
      <template v-if="editAll && workEvent.isEvaluate == 1 && evaluateConfig.modifyEventEvaluate && workEvent.isEditedEvaluate == 0">
        <el-button v-if="workEvent.state == 'finished'" type="plain" @click="modifyEvaluate" :disabled="pending">{{$t('common.base.editEvaluated')}}</el-button>
      </template>
    </div>
  </div>
</template>

<script>
/* api */
import * as EventApi from '@src/api/EventApi.js';
/* util */
import { getRootWindowInitData } from '@src/util/window';
const rootWindowInitData = getRootWindowInitData();

export default {
  name: 'customer-evaluate',
  props: {
    workEvent: {
      type: Object,
      default: () => {}
    },
    evaluateConfig: {
      type: Object,
      default: () => {}
    },
    evaluateData: {
      type: Object,
      default: () => {}
    },
    editAll: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    'workEvent': {
      handler(newValue, oldValue) {
        const { degree, suggestion, evaluate, evaluateContent } = newValue
        this.reviewData = Object.assign(this.evaluateData, { degree, suggestion, evaluate })
        this.evaluateContent = evaluateContent
      },
      deep: true,
      immediate: true,
    }
  },
  computed: {
    starFields() {
      var starEvaluateFeilds = this.evaluateConfig.starEvaluateFeilds;
      return this.evaluateConfig.starEvaluates.map(function (item, index) {
          return {
              name: item,
              fieldName: starEvaluateFeilds[index]
          }
      })
    },
    tagEvaluates(){
      var reviewData = this.reviewData || {};
      var evaluate = reviewData.evaluate || {};
      return evaluate.tagEvaluates || [];
    },
    // 展示回访问卷方案设置
    customerSatisfaction() {
      return rootWindowInitData?.customerSatisfaction;
    }
  },
  data() {
    return {
      reviewData: {},
      evaluateContent: '',
      loading: false,
      pending: false,
      iframeUrl: '',
    }
  },
  created() {
    // 老版客户评价
    if (!this.customerSatisfaction) return;

    this.loading = true;
    this.iframeUrl = `/pcoperation/satisfaction/detail?type=EVENT&dataId=${this.workEvent.id}&typeId=${this.workEvent.templateId}`;
    
    window.addEventListener('message', ({ data }) => {
      this.loading = data.showLoading;
    });
  },
  methods: {
    getDegreeImg(type) {
	    // if (type === '满意') return 'review-degree-satisfy-active';
      // if (type === '一般') return 'review-degree-commonly-active';
      // if (type === '不满意') return 'review-degree-unsatisfy-active';
      if (type === '非常满意') return 'icon-feichangmanyi verySatisfied';
      if (type === '满意') return 'icon-manyi satisfied';
      if (type === '一般') return 'icon-yiban commonly';
      if (type === '不满意') return 'icon-bumanyi disSatisfied';
      if (type === '非常不满意') return 'icon-feichangbumanyi veryDissatisfied';
    },

    getStar(fieldName) {
      let evaluate = this.reviewData.evaluate || {};
      return evaluate[fieldName] || 0;
    },

    async modifyEvaluate() {
      try {
        this.pending = true;

        // 判断问券方案是否变更
        const { result } = await EventApi.judgeSatisfactionUidIsChange({ eventId: this.workEvent.id });
        if (result === 0 && !await this.$platform.confirm(this.$t('event.detail.components.customerEvaluate.modifyTip'), this.$t('task.tip.modifyTip'))) return this.pending = false;

        this.pending = false;

        this.$emit('modifyEvaluate');
      } catch(err) {
        this.pending = false;
        console.error(err);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.icon-feichangmanyi,.icon-manyi,.icon-yiban,.icon-bumanyi,.icon-feichangbumanyi{
  color:#595959!important;
  font-size:24px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-right: 2px;
  display: inline-block;
  vertical-align: middle;
}
.verySatisfied{
  color: #52c41a!important;
}
.satisfied {
  color: #26c8ff!important;
}
.commonly {
  color: #ffa726!important;
}
.disSatisfied {
  color: #ff7043!important;
}
.veryDissatisfied {
  color: #d9363e!important;
}
.evaluate-degree-img {
  width: 24px;
  height: 24px;
  margin-right: 2px;
  display: inline-block;
  vertical-align: middle;

  background: url(../../../../../assets/img/task/review-degree.png) no-repeat;
  background-size: 24px 144px;

  &.review-degree-satisfy {
    background-position: 0 0;
  }

  &.review-degree-commonly {
    background-position: 0 -24px;
  }

  &.review-degree-unsatisfy {
    background-position: 0 -48px;
  }

  &.review-degree-satisfy-active {
    background-position: 0 -72px;
  }

  &.review-degree-commonly-active {
    background-position: 0 -96px;
  }

  &.review-degree-unsatisfy-active {
    background-position: 0 -120px;
  }
}
.star-evaluate-row {
  display: flex;
  align-items: center;
  .star-title {
    margin-right: 20px;
  }
}
.review-other-info {
  color: #aaa;
  margin: 0;
  padding: 10px 0 5px 0;
  white-space: pre-wrap;
}
.form-view-row-content {
  .review-tag{
    display: inline-block;
    margin-right: 10px;
    padding: 0 8px;
    background-color: #f5fffd;
    color: #00d1d3;
    border: 1px solid #00d1d3;
    border-radius: 2px;
    line-height: 24px;
  }
}

.detail-evaluated {
  border: 1px solid #f4f6f7;
  border-radius: 5px;
  margin-bottom: 20px;
  padding: 10px;
}
</style>